<template>
  <div class="bigbox">
    <div class="head">
      <h1 style="margin-left: 140px;">电商系统</h1>
    </div>
    <div class="gps">
        <RouterLink active-class="gpsC" :to="{ name: 'products' }">产品列表</RouterLink>
        <RouterLink active-class="gpsC" :to="{ name: 'cart' }">购物车</RouterLink>
        <RouterLink active-class="gpsC" :to="{ name: 'user' }">用户中心</RouterLink>
    </div>
    <div class="content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup>

</script>
<style>
* {
  margin: 0px;
  padding: 0px;
}

.bigbox {
  width: 100vw;
  height: 100vh;
  background-color:#edf0ed;
  display: flex;
  flex-wrap: wrap;
}

.head {
  width: 100vw;
  height: 100px;
  background-color:#3c8dbd;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.gps {
  width: 200px;
  min-height: calc(100vh - 105px);
  background-color: #334258;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

a{
  display: block;
  color: white;
  width: 160px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  margin-top: 10px;
  text-decoration: none;
}

a:hover{
  background-color: #3c8dbd;
  color: aquamarine;
}
.gpsC{
  background-color: #3c8dbd;
  color: aquamarine;
}

.content {
  width: calc(100vw - 210px);
  height: calc(100vh - 105px);
  background-color:#f1f2f6;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}
</style>